<template>
  <div class="detail">
    <div class="top-header">
      <img :src="mete.url" title="null" />
      <span>{{ mete.name }}</span>
    </div>
    <div class="info-body">
      <div class="desc-info">
        <div class="header">
          <div ref="desc" class="desc-lot" />
          <div class="title">极端气象描述</div>
        </div>
        <div class="content" v-text="mete.desc" />
      </div>
      <div class="effect-info">
        <div class="header">
          <div ref="effect" class="effect-lot" />
          <div class="title">规模及影响</div>
        </div>
        <div class="content" v-text="mete.effect" />
      </div>
      <div class="measure-info">
        <div class="header">
          <div ref="measure" class="measure-lot" />
          <div class="title">应对措施手段</div>
        </div>
        <div class="content" v-text="mete.measure" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mete: {
      type: Object,
      default: () => {
        return {
          url: 'https://theblogimage.oss-cn-fuzhou.aliyuncs.com/imagefortypora/high%20temperature.jpg',
          name: '高温',
          desc: '高温天气指温度较长时间保持在较高水平的气候现象，通常会出现在夏季。当温度达到一定程度时，会对人们的健康和日常生活造成一定的影响。',
          effect:
            '高温天气的规模通常涉及较大区域，例如整个地区或多个城市。高温天气可以导致人们体内失水过多，引起中暑等健康问题；对于年老体弱的人、儿童、孕妇和病患人群来说，高温天气的影响更为严重。此外，在农业方面，高温天气会加速作物的生长进程，同时也增加了干旱和火灾等自然灾害的发生几率；在工业领域，高温天气对电力供应和交通运输也可能造成一定的影响。',
          measure:
            '为了应对高温天气，需要采取一系列措施。应当加强预警和信息发布，提醒公众避免在高温时段长时间户外活动和暴晒，同时加强对易受高温天气影响的人群的照料和帮助。公众应自觉减少户外活动，适当调整作息时间，增加补水和防暑降温措施。农业部门可以采用遮荫、喷灌等方式对农作物进行保护；工业企业需要确保设备安全运行，适当调整生产计划，以保障供电和交通等基础设施的正常运营。',
          wordCloud: [
            '高温',
            '天气',
            '炎热',
            '酷暑',
            '炎夏',
            '热浪',
            '热量',
            '防晒',
            '温度',
            '炙烤',
            '灼热',
            '汗水',
            '空调',
            '古井不波',
            '皮肤',
            '暑假',
            '温暖',
            '夏季',
            '气温',
            '凉爽'
          ]
        }
      }
    }
  },
  data() {
    return {
      anim: null
    }
  },
  beforeDestroy() {
    this.anim && this.anim.destroy()
  },
  mounted() {
    const doms = [this.$refs.desc, this.$refs.effect, this.$refs.measure]

    const data = [
      require('@/assets/lottie/desc.json'),
      require('@/assets/lottie/effect.json'),
      require('@/assets/lottie/measure.json')
    ]

    for (let i = 0; i < doms.length; ++i) {
      this.anim = this.$lottie.loadAnimation({
        container: doms[i], // 包含动画的dom元素
        renderer: 'svg', // 渲染出来的是什么格式
        loop: true, // 循环播放
        autoplay: true, // 自动播放
        animationData: data[i] // 动画json的本地路径
        // path:''//网络json地址, 选择 animationData 后，则不用path了，
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  color: #fff;

  .top-header {
    display: flex;
    align-items: center;
    height: 3vw;

    img {
      box-sizing: border-box;
      width: 3vw;
      height: 100%;
      border: 0.15vw solid #0efcff;
      border-radius: 50%;
    }

    span {
      padding: 1vw;
      font-size: 1.5vw;
      font-weight: 700;
    }
  }

  .info-body {
    height: 80%;

    div[class$='info'] {
      height: 33.3%;

      .header {
        box-sizing: border-box;
        // border: 1px solid red;
        display: flex;
        align-items: center;
        height: 3vw;
        padding: 0.3vw;

        div[class$='lot'] {
          width: 5vw;
          height: 100%;
        }

        .title {
          font-size: 1.2vw;
          font-weight: 700;
        }
      }

      .content {
        height: 10vw;
        padding: 0.7vw 4vw;
        overflow: hidden;
        font-size: 1vw;
        text-indent: 1.5rem;
      }
    }
  }
}
</style>
